<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar :title="scrollTop>0?'线路详情':''" :navbarType='scrollTop>0?0:5'></wlk-navbar>
        <wlk-canvas mode="line" :item="line" :qrcode="qrcode" ref="childComponent"></wlk-canvas>
        <wlk-line-poster mode="line" :posterImg="line.poster" :qrcode="qrcode" ref="childPosterComponent"></wlk-line-poster>
        <block v-if="!loading">
            <block v-if="!$u.test.isEmpty(line.suitinfo)">
                <view class="relative">
                    <u-swiper
                            radius="0"
                            :list="line.images"
                            indicator
                            :autoplay="false"
                            :indicatorStyle="indicatorStyle"
                            indicatorMode="dot"
                            height="370"
                            @change="e => swiperCurrent = e.current"
                    ></u-swiper>
                    <view class="wd100 inside-info" v-if=" line.images && line.images[0].poster && swiperCurrent>0">
                        {{line.inside}}
                    </view>
                </view>
                <view class="detail-content">
                    <view class="content-title">
                        <view class="title">{{line.title}}</view>
                        <view class="desc u-line-1">{{line.desc}}</view>
                        <view class="wlkflex justify-between mt05">
                            <view class="wlkflex tags wrap">
                                <view class="tags-item" v-for="(tag,i) in line.tagids" v-if="i<10">
                                    <u-tag :text="tag.name" size="mini" type="info" bgColor="#F9F9F9" color="#999" borderColor="#F3F3F3"></u-tag>
                                </view>

                            </view>
                            <view class="sales">
                                {{line.sales}}人出游
                            </view>
                        </view>
                        <view class="wd100 price-info wlkflex justify-between">
                            <view v-if="line.minprice>0" class="bold">
                                <span>￥</span>
                                <span class="price">{{line.minprice}}</span>
                                <span class="ml05">起</span>
                            </view>
                            <view v-else>
                                <span class="col9">暂无库存</span>
                            </view>
                            <view class="share-btn" @click="showShare=true">
                                <u-icon name="share" :color="themeColor" size="27"></u-icon>
                            </view>
                        </view>
                    </view>
                    <u-gap height="8" bgColor="#F9F9F9"></u-gap>
                    <view class="pd30">
                        <view class="pack">
                            <view class="head-title mb20">可选套餐</view>
                            <view class="wd100 overHidden">
                                <u-scroll-list :indicator="false">
                                    <view class="wlkflex" >
                                        <view @click="radioClick(index)" :class="'overHidden pack-item br04 relative wlkflex '+[suitIndex==index?'active':'']" :style="suitIndex==index?'border-color:'+themeColor:''" v-for="(item, index) in line.suitinfo" :key="index">
                                            <view class="wd100 center name" :style="suitIndex==index?'color:'+themeColor:'color:#999999'">
                                                {{item.name}}
                                            </view>
                                            <view class="active-icon" :style="{backgroundColor:themeColor}" v-if="suitIndex==index">
                                                <u-icon size="12" name="checkmark" color="#FFFFFF"></u-icon>
                                            </view>
                                        </view>
                                    </view>
                                </u-scroll-list>
                            </view>
                        </view>
                        <view class="calendar mt20">
                            <view class="head-title mb20">近期出发</view>
                            <view class="wd100 relative" v-if="line.suitinfo[suitIndex].priceinfo.length>0">
                                <u-scroll-list :indicator="false">
                                    <view class="wlkflex" >
                                        <view :class="'overHidden calendar-item br04 relative wlkflex '+[priceIndex==item.date?'active':'']" :style="priceIndex==item.date?'border-color:'+themeColor:''" v-for="(item, index) in line.suitinfo[suitIndex].priceinfo" v-if="index<15" :key="index">
                                            <view class="wd100 center name" @click="dayClick(item.date)">
                                                <view class="date">
                                                    <span class="bold">{{item.read_date}}</span>
                                                    <span class="col9 ml05">{{item.read_date_day}}</span>
                                                </view>
                                                <view class="mt05 price"  v-if="item.stock=='-1' || item.stock>0">
                                                    ￥{{item.minprice}}
                                                </view>
                                                <view class="mt05 col9" v-else>已报满</view>
                                            </view>
                                            <view class="active-icon" :style="{backgroundColor:themeColor}" v-if="priceIndex==item.date">
                                                <u-icon size="12" name="checkmark" color="#FFFFFF"></u-icon>
                                            </view>
                                        </view>
                                    </view>
                                </u-scroll-list>
                                <view class="show-more" @click="jump('/pages/line/before')">
                                    <text class="text">查看更多</text>
                                </view>
                            </view>
                            <view v-else>
                                <u-empty
                                        mode="data"
                                        iconSize="43"
                                >
                                </u-empty>
                            </view>
                        </view>
                    </view>
                    <u-gap height="8" bgColor="#F9F9F9"></u-gap>
                    <view class="merch-card pd30 br04 wlkflex justify-between">
                        <view class="merch-info wlkflex">
                            <view class="logo">
                                <u-avatar size="47" :src="line.merch.logo"></u-avatar>
                            </view>
                            <view class="name ml15">
                                <view class="u-line-1">
                                    {{line.merch.name}}
                                </view>
                                <view class="merch-tag mt05">
                                    <u-tag text="供应商" size="mini" type="info" bgColor="#F9F9F9" color="#999" borderColor="#F3F3F3"></u-tag>
                                </view>
                            </view>
                        </view>
                        <navigator class="btn" :style="{backgroundColor:themeColor}" :url="'/pages/line/list?merchid='+line.merch.id">
                            其他线路
                        </navigator>
                    </view>
                    <u-gap height="8" bgColor="#F9F9F9"></u-gap>
                    <u-sticky bgColor="#fff">
                        <view class="content-tabs">
                            <u-tabs
                                    :activeStyle="{
                        color: themeColor,
                        fontSize: '28rpx',
                        padding:'0 9rpx',
                        fontWeight: 'bold',
                        transform: 'scale(1.05)'
                    }"
                                    :itemStyle="{
                         height: '40px',
                         alignItems:'flex-start',
                         padding:'0 30rpx',
                    }"
                                    :inactiveStyle="{
                        color: '#646566',
                        fontSize: '28rpx',
                        padding:'0 9rpx',
                        transform: 'scale(1)'
                    }"
                                    :list="line.contentList"
                                    lineWidth="35"
                                    lineHeight="2"
                                    :current="current"
                                    :lineColor="themeColor"
                                    @change="changeTab"
                            ></u-tabs>
                        </view>
                    </u-sticky>
                    <view class="u-content pd30">
                        <view v-if="line.contentList[current].showtype == 'content'">
                            <u-parse :content="line.contentList[current].value"></u-parse>
                        </view>
                        <view v-else>
                            <view class="route-box" v-for="(day,k) in line.contentList[current].value" :style="{borderColor:themeColor}">
                                <view class="day-num" :style="{backgroundColor:themeColor,borderColor:themeColor}">第{{k+1}}天</view>
                                <view class="day-title">{{day.name}}</view>
                                <view class="step-nav">
                                    <view class="relative step-box" v-if="day.city">
                                        <view class="name">城市</view>
                                        <view class="desc mt05">{{day.city}}</view>
                                        <view class="icon-box">
                                            <view class="custom-icon custom-icon-city" :style="{color:themeColor}"></view>
                                        </view>
                                    </view>
                                    <view class="relative step-box" v-if="day.travel">
                                        <view class="name">交通</view>
                                        <view class="desc mt05">{{day.travel}}</view>
                                        <view class="icon-box">
                                            <view class="custom-icon custom-icon-travel" :style="{color:themeColor}"></view>
                                        </view>
                                    </view>
                                    <view class="relative step-box" v-if="day.meals">
                                        <view class="name">用餐</view>
                                        <view class="desc mt05">{{day.meals}}</view>
                                        <view class="icon-box">
                                            <view class="custom-icon custom-icon-meals" :style="{color:themeColor}"></view>
                                        </view>
                                    </view>
                                    <view class="relative step-box" v-if="day.stay">
                                        <view class="name">住宿</view>
                                        <view class="desc mt05">{{day.stay}}</view>
                                        <view class="icon-box">
                                            <view class="custom-icon custom-icon-stay" :style="{color:themeColor}"></view>
                                        </view>
                                    </view>
                                    <view class="relative step-box" style="border-left:none"  v-if="day.content">
                                        <view class="name">行程</view>
                                        <view class="desc mt05">
                                            <u-parse :content="day.content"></u-parse>
                                        </view>
                                        <view class="icon-box" style="left: -30rpx;">
                                            <view class="custom-icon custom-icon-route" :style="{color:themeColor}"></view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <u-back-top :scroll-top="scrollTop" top="400" z-index="9999" icon="arrow-up" :customStyle="{
            backgroundColor:themeColor
        }" :iconStyle="iconStyle"></u-back-top>

                <view class="fixed-buy-btn wd100 wlkflex justify-between">
                    <view class="other-btn wlkflex justify-between">
                        <view class="like-btn" @click="likeFun">
                            <u-icon labelPos="bottom" labelColor="#333" labelSize="12px" label="收藏" name="star-fill" size="27" :color="themeColor" v-if="line.user_like"></u-icon>
                            <u-icon labelPos="bottom" labelColor="#333" labelSize="12px" label="收藏" name="star" color="#333" size="27" v-else></u-icon>
                        </view>
                        <view class="tel-btn" @click="callPhone(line.merch.mobile)">
                            <u-icon labelPos="bottom" labelColor="#333" labelSize="12px" label="电话" name="phone" color="#333" size="27"></u-icon>
                        </view>
                        <view class="kf-btn" @click="servicer()">
                            <u-icon labelPos="bottom" labelColor="#333" labelSize="12px" label="客服" name="server-man" color="#333" size="27"></u-icon>
                        </view>
                    </view>
                    <view class="buy-btn">
                        <u-button :customStyle="{
                    fontWeight: 'bold',
                    height:'90rpx'
                }" :color="themeColor" size="large" :disabled="!line.minprice>0" shape="circle" :text="line.minprice>0?'立即预订':'暂无库存'" @click="jump('/pages/line/before')"></u-button>
                    </view>
                </view>
            </block>
            <block v-else>
                <view class="not-data">
                    <u-empty
                            :icon="uEmpty.data"
                            text="没有可选套餐"
                    >
                    </u-empty>
                </view>
            </block>
        </block>

        <u-popup safeAreaInsetBottom :customStyle="shareStyle" :show="showShare" @close="closeShare" round="20">
            <view class="share-box">
                <view class="pd30">
                    <view class="center title">立即分享给好友</view>
                    <view class="share-btn-info wlkflex">
                        <!-- #ifdef H5 || MP-WEIXIN -->
                        <block  v-if="platform=='wxMiniProgram'">
                            <button open-type="share" @share='onShareAppMessage' class="wlkflex justify-center wrap" >
                                <view class="icon-box wlkflex justify-center" style="background-color: #07c160">
                                    <u-icon  name="weixin-fill" size="32" color="#FFFFFF"></u-icon>
                                </view>
                                <view class="btn-name wd100 center mt10">微信好友</view>
                            </button>
                        </block>
                        <block v-else-if="platform=='wxOfficialAccount'">
                            <view class="wlkflex justify-center wrap" @click="showH5Share=true">
                                <view class="icon-box wlkflex justify-center" style="background-color: #07c160">
                                    <u-icon  name="weixin-fill" size="32" color="#FFFFFF"></u-icon>
                                </view>
                                <view class="btn-name wd100 center mt10">微信好友</view>
                            </view>
                        </block>
                        <block v-else>
                            <view class="wlkflex justify-center wrap" @click="copyLink">
                                <view class="icon-box wlkflex justify-center">
                                    <i class="gg-link" style="color: #606266;transform: rotate(-45deg) scale(var(--ggs, 1.2));"></i>
                                </view>
                                <view class="btn-name wd100 center mt10">复制链接</view>
                            </view>
                        </block>
                        <!-- #endif -->
                        <view class="wlkflex justify-center wrap" @click="canvas">
                            <view class="icon-box wlkflex justify-center">
                                <u-icon name="photo-fill" size="32" :color="themeColor"></u-icon>
                            </view>
                            <view class="btn-name wd100 center mt10">分享海报</view>
                        </view>
                        <view class="wlkflex justify-center wrap" @click="poster" v-if="!$u.test.isEmpty(line.poster)">
                            <view class="icon-box wlkflex justify-center">
                                <u-icon name="fingerprint" size="32" :color="themeColor"></u-icon>
                            </view>
                            <view class="btn-name wd100 center mt10">长图海报</view>
                        </view>
                    </view>
                </view>
                <u-gap height="8" bgColor="#F9F9F9"></u-gap>
                <view class="close center" @click="closeShare">取消</view>
            </view>
        </u-popup>
        <u-overlay :show="showH5Share" @click="showH5Share = false">
            <view class="wd100 hg100">
                <image src="/static/images/other/share.png" class="share-image" mode="widthFix"></image>
            </view>
        </u-overlay>
    </view>
</template>

<script>
    import { formatRichText,makePhoneCall,copy,toUrl,toWork } from '@/wlkutils/tools';
    import platform from "@/wlkutils/platform";
    import share from "@/wlkutils/share";
    import { mapMutations,mapGetters } from 'vuex';
    var _self;
	export default {
        computed: {
            ...mapGetters(['userInfo','themeColor','isLogin','uEmpty'])
        },
		data() {
			return {
			    id:'',
                line:{},
                scrollTop:0,
                swiperCurrent:0,
                current:0,
                loading:true,
                showShare:false,
                showH5Share:false,
                indicatorStyle:{
			        bottom:'80rpx',
                    left:'30rpx'
                },
                suitIndex:0,
                priceIndex:0,
                iconStyle: {
                    color: '#FFFFFF'
                },
                shareStyle:{
                },
                platform:platform.get(),
                showCanvas:false,
                showPoster:false,
                qrcode:''
			};
		},
		onLoad(options) {
		    _self = this;
            _self.id = this.$Route.query.id;
            if(_self.id>0){
                this.getData();
            }
		},
		onShow() {

		},
        onPageScroll : function(e) {
            _self.scrollTop = e.scrollTop;
        },
        onShareAppMessage(res){
            let data = new Object();
            data.title = this.line.title;
            data.desc = this.line.desc;
            data.params = {id:this.id};
            data.imageUrl = this.line.images[0].poster?this.line.images[1].url:this.line.images[0];
            return share.setShareInfo(data);
        },
		methods: {
            ...mapMutations(["setLoginPopupShow"]),
            closeShare(){
                this.showShare = false;
            },
            radioClick(index) {
               this.suitIndex = index;
               this.priceIndex = this.line.suitinfo[this.suitIndex].priceinfo[0]?this.line.suitinfo[this.suitIndex].priceinfo[0].date:0;
            },
            dayClick(index){
               this.priceIndex = index;
            },
            changeTab(item){
                this.current = item.index
            },
			getData() {
                _self.loading = true;
                    uni.$u.http.post('line/getDetail', {
                    id:_self.id
                }).then(res => {
                    _self.line = res.data.line;
                    _self.initShareInfo();
                    if (_self.line.contentList.length>0){
                        _self.line.contentList.forEach(function (v,k) {
                            if(v.showtype == 'content'){
                                _self.line.contentList[k].value = v.value?formatRichText(v.value):'';
                            }else{
                                _self.line.contentList[k].value.forEach(function (a,b) {
                                    _self.line.contentList[k].value[b].content = a.content?formatRichText(a.content):'';
                                })
                            }
                        })
                    }
                    if(!uni.$u.test.isEmpty(_self.line.suitinfo)){
                        _self.priceIndex = !uni.$u.test.isEmpty(_self.line.suitinfo[_self.suitIndex].priceinfo)?_self.line.suitinfo[_self.suitIndex].priceinfo[0].date:0;
                    }
                    _self.loading = false;
                }).catch(res => {

                })
			},
            async likeFun(){
               let res = await uni.$u.http.post('like/setLineLike', {id:_self.id},{custom: {load: false}}).catch((error) => {
                    uni.$u.toast(`${error.message}`)
                    return false
                });
               if (res){
                   uni.$u.toast(res.msg)
                   this.line.user_like =!this.line.user_like;
               }
            },
            callPhone(phone){
                makePhoneCall(phone);
            },
            servicer(){
                toWork(this.line.merch.kf_url,this.line.merch.corp_id);
            },
            copyLink(){
                let params = {id:this.id};
                let shareInfo = this.initShareInfo();
                copy(shareInfo.copyLink);
                _self.showShare = false;
            },
            async canvas(){
                if(!this.isLogin){
                    this.showShare = false;
                    this.setLoginPopupShow(true);
                    return false;
                }
                // 渲染
                // #ifndef MP
                let params = {id:this.id};
                let shareInfo = this.initShareInfo();
                this.qrcode = shareInfo.copyLink;
                this.$refs.childComponent.canvas();
                this.showShare = false;
                // #endif
                // #ifdef MP
                let res = await uni.$u.http.post('wechat/getUnlimitedQRCode',
                    {id:this.id,type:'line'},{custom: {hideMsg: true}}
                    ).then(res => {
                    _self.qrcode =  res.data;
                    _self.$refs.childComponent.canvas();
                    _self.showShare = false;
                })
                // #endif

            },
            async poster(){
                if(!this.isLogin){
                    this.showShare = false;
                    this.setLoginPopupShow(true);
                    return false;
                }
                // 渲染
                // #ifndef MP
                let params = {id:this.id};
                let shareInfo = this.initShareInfo();
                this.qrcode = shareInfo.copyLink;
                this.$refs.childPosterComponent.canvas();
                this.showShare = false;
                // #endif
                // #ifdef MP
                let res = await uni.$u.http.post('wechat/getUnlimitedQRCode',
                    {id:this.id,type:'line'},{custom: {hideMsg: true}}
                ).then(res => {
                    _self.qrcode =  res.data;
                    _self.$refs.childPosterComponent.canvas();
                    _self.showShare = false;
                })
                // #endif

            },
            initShareInfo(){
                let data = new Object();
                data.title = this.line.title;
                data.desc = this.line.desc;
                data.params = {id:this.id};
                data.imageUrl = this.line.images[0].poster?this.line.images[1].url:this.line.images[0];
                return share.setShareInfo(data);
            },
            jump(url){
                if(!this.isLogin){
                    this.setLoginPopupShow(true);
                    return false;
                }else{
                    let query = {
                        id:this.line.id,
                        suitIndex:this.suitIndex,
                        priceIndex:this.priceIndex
                    };
                    url+=uni.$u.queryParams(query);
                    toUrl(url);
                }

            }
		},
	};
</script>

<style lang="scss">
    page{
        background-color: #FFFFFF;
        padding-bottom: 100rpx;
        .inside-info{
            padding: 20rpx 20rpx 20rpx 30rpx;
            pointer-events: none;
            position: absolute;
            bottom: 0;
            background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.5));
            color: #FFFFFF;
            font-size: $font-base;
        }
        .line-start{
            position: absolute;
            bottom: 0;
            left: 0;
            font-size: $font-sm;
            background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.5));
            border-radius:4px 0 4px 0;
            padding: 20rpx;
            color: #FFFFFF;
            width: 100%;
        }
        .detail-content{
            .head-title{
                font-size: $font-lt;
                font-weight: bold;
            }
            .active-icon{
                padding: 5rpx 0rpx 0 5rpx;
                border-radius: 20px 0 0 0;
                position: absolute;
                right: 0;
                bottom: 0;
            }
            .pack{
                .pack-item{
                    min-width: 200rpx;
                    background-color: #f3f8fe;
                    margin: 10rpx;
                    height: 90rpx;
                    border: 1px solid #f3f3f3;
                    padding: 0 10rpx;
                    .name{
                        font-size: $font-lt;
                    }
                }
                .active{
                   /* border-bottom: 10rpx solid;
                    min-width: 210rpx;
                    height: 100rpx;*/
                    box-shadow:0 2px 4px rgba(0,0,0,.06);
                }
            }
            .calendar{
                .price{
                    color:$-tour-price-color;
                }
                .calendar-item{
                    width: 210rpx;
                    background-color: #f3f8fe;
                    margin: 10rpx;
                    height: 110rpx;
                    border: 1px solid #f3f3f3;
                    .name{
                        font-size: $font-base;
                    }
                }
                .active{
                   /* width: 220rpx;
                    height: 120rpx;*/
                    box-shadow:0 2px 4px rgba(0,0,0,.06);
                }
                .show-more {
                    background-color: #FFFFFF;
                    padding: 3px 0 3px 10px;
                    @include flex(column);
                    align-items: center;
                    position: absolute;
                    right: 0;
                    top: 0;
                    box-shadow: -5px 0 5px rgba(0, 0, 0, 0.1);
                    .text {
                        font-size: $font-sm;
                        width: 24rpx;
                        /*color: #f56c6c;*/
                        line-height: 16px;
                    }
                }
            }
            .content-title{
                padding: 30rpx;
                background-color: #FFFFFF;
                .title{
                    font-size: $font-lg;
                    font-weight: bold;
                }
                .desc{
                    font-size: $font-base;
                    color: $uni-text-color-grey;
                    margin-top: 15rpx;
                }
                .tags{
                    width: 78%;
                    .tags-item{
                        margin-top: 10rpx;
                        margin-right: 10rpx;
                    }
                }
                .sales{
                    font-size: $font-sm;
                    color: $-color-muted;
                }
                .price-info{
                    color: $-tour-price-color;
                    margin-top: 20rpx;
                    font-size: $font-lt;
                    .price{
                        font-size: 45rpx;
                    }
                }
            }
            .content-tabs{
                background-color: #FFFFFF;
                padding-top: 20rpx;
                width: 100%;
                border-bottom: 1px solid #F3F3F3;
                height: 49px;
            }
            .share-btn{
                width: 82rpx;
                height: 82rpx;
                border-radius: 50%;
                background-color: #F9F9F9;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .merch-card{
                background-color: #FFFFFF;
                padding: 30rpx 40rpx;
                .merch-info{
                    width: 70%;
                    .name{
                        font-size: $font-lt;
                        .merch-tag{
                            width: 100rpx;
                        }
                    }
                }
                .btn{
                    padding: 8rpx 30rpx;
                    border-radius: 100rpx;
                    font-size: $font-base;
                    color: #FFFFFF;
                }
            }
            .u-content{
                .route-box{
                    border-top: 2px solid;
                    .day-num{
                        border-radius: 0 0 160rpx 4px;
                        color: white;
                        display: inline-block;
                        padding: 12rpx 50rpx 12rpx 25rpx;
                        font-size: $font-lt;

                    }
                    .day-title{
                        font-size: $font-lg;
                        font-weight: bold;
                        text-align: center;
                    }
                    .step-nav{
                        padding: 30rpx 20rpx 20rpx 30rpx;
                        .step-box{
                            border-left:1px dashed #F3F3F3;
                            padding: 12rpx 0 20rpx 40rpx;
                            .icon-box{
                                width: 60rpx;
                                height: 60rpx;
                                background-color: #FFFFFF;
                                border-radius: 50%;
                                position: absolute;
                                left: -31rpx;
                                top: 0;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                .custom-icon{
                                    font-size: 50rpx;
                                    background-color: #FFFFFF
                                }
                            }
                            .name{
                                font-size: $font-lt;
                                font-weight: bold;
                            }
                            .desc{
                                font-size: $font-base;
                            }
                        }
                    }
                }
            }
        }
        .fixed-buy-btn{
            position: fixed;
            z-index: 999;
            padding: 20rpx 30rpx;
            background-color: #FFFFFF;
            bottom: 0;
            box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1);
            .other-btn{
                width: 32%;
            }
            .buy-btn{
                width: 62%;
            }
        }
        .share-box{
            .title{
                font-size: $font-base;
                color: $uni-text-color;
                padding: 10rpx;
            }
            .share-btn-info{
                margin: 50rpx 0 20rpx 0;
                button{
                    margin: 0;
                }
                .btn-name{
                    font-size: $font-sm;
                    color: $uni-text-color-grey;
                }
                .icon-box{
                    width: 95rpx;
                    height: 95rpx;
                    border-radius: 50%;
                    background-color: #F9F9F9;

                }
            }
            .close{
                line-height: 100rpx;
            }
        }
        .share-image{
            width:100%;
        }
    }

</style>
